/**
 * time: 2025-03-27
 * author: XJ
 * description: 用于实验申请入口文件
 */

import PageContainerComp from '@/components/CommonComp/pageContainer';
import ExperimentApplicationFilter from '@/components/ExperimentApplication/filter';
import { useModel } from '@umijs/max';
import { Splitter, Tabs } from 'antd';
import style from '@/components/ExperimentApplication/experimentApplication.module.css';
import TableCom from '@/components/ExperimentApplication/table';
import ExperimentModal from '@/components/ExperimentApplication/modal';
import LeftActionTree from '@/components/ExperimentApplication/LeftActionTree';
import LeftPatternTree from '@/components/ExperimentApplication/LeftPatternTree';
import LeftExperomentData from '@/components/ExperimentApplication/LeftExperomentData';
import { useEffect } from 'react';

const ExperimentApplication: React.FC = () => {
  const { experimentApplicationProps, setExperimentApplicationProps } = useModel(
    'ExperimentApplication.experimentApplication',
  );

  const { tabsModel, setTabsModel } = useModel('ExperimentApplication.switchTabs');

  const tabsOnChange = (e: string) => {
    setTabsModel(prev => ({...prev, nowSelect:e}))
  };

  const onResize = (number: number[]) => {
    if (number[0] == 0) {
      setExperimentApplicationProps({ ...experimentApplicationProps, isCollapsible: true });
    } else {
      setExperimentApplicationProps({ ...experimentApplicationProps, isCollapsible: false });
    }
  };
  return (
    <PageContainerComp>
      <Splitter
        lazy
        style={{ height: window.innerHeight - 86, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}
        onResize={onResize}
      >
        <Splitter.Panel
          collapsible={{ start: true, end: true, showCollapsibleIcon: true }}
          defaultSize="20%"
        >
          <div style={{ padding: 5, background: '#141414', height: '100%' }}>
            <Tabs
              style={{ background: '#141414' }}
              defaultActiveKey="action"
              items={tabsModel.tabItems}
              onChange={tabsOnChange}
            />
            {
              tabsModel.nowSelect == "action" ? 
              (<LeftActionTree />) : 
              tabsModel.nowSelect == "pattern" ? 
              (<LeftPatternTree />) : 
              (<LeftExperomentData />)
            }
            
          </div>
          {/* <ExperimentApplicationFilter /> */}
        </Splitter.Panel>
        <Splitter.Panel
          collapsible={{ start: true, end: true, showCollapsibleIcon: true }}
          defaultSize="80%"
        >
          {/* <TableCom /> */}
        </Splitter.Panel>
        <Splitter.Panel
          collapsible={{ start: true, end: true, showCollapsibleIcon: true }}
          defaultSize="0%"
        >
          {/* <TableCom /> */}
        </Splitter.Panel>
      </Splitter>
      <ExperimentModal />
    </PageContainerComp>
  );
};
export default ExperimentApplication;
